<template>
<div class="page">
  <navTop title="详情" />
	<img style="width:100%;display: block;" v-if="!data.isErr&&data.thumb" @error="data.isErr=true;$forceUpdate()" :src="data.thumb" alt="加载错误" />
	<img style="width:100%;display: block;" v-else src="http://guizhou-oss.oss-cn-guiyang-gzdata-d01-a.res.gzdata.com.cn/qiji/zhanwei_zs.png" />
	<div class="title_h flex_sb flex_ac mt20 mb10">
		<div>{{data.name||'-'}}</div>
		 <div class="flex_ac small">
			<img width="12px" height="12px" class="mr5" src="~@/assets/img/project/see.png" alt="">
			<div>{{data.read_num}}</div>
		</div>
	</div>
	<div class="info_div">
		<div class="flex_sb">
			<div class="info_item flex_ac">
				<div class="info_name">投资金额</div>： <span>{{ data.invest_money }}</span>
			</div>
			<div class="info_item flex_ac">
				<div class="info_name">占地面积</div>： <span>{{ data.plan_area }}</span>
			</div>
		</div>
		<div class="info_item flex_ac mt10">
			<div class="info_name">项目单位</div>： <span>{{ data.unit }}</span>
		</div>
		<div class="info_item flex_ac mt10">
			<div class="info_name">时间</div>： <span>{{ data.update_time }}</span>
		</div>
		<div class="info_item flex_ac mt10">
			<div class="info_name">地址</div>： <span>{{ data.city_name }}</span>
		</div>
	</div>

	<div class="page1">
		<div class="news_ps" v-if="data.company_names?.length>0">
			<div class="news_title">查看相关企业投资意愿画像</div>
			<div class="news_company" v-for="i,k in data.company_names" :key="k" @click="toCompany(i.identification)">
				{{i.company_name}}
			</div>
		</div>
		
		<div class="content" v-html="data.content"></div>
	</div>

	<div class="h50"></div>
	<bottomDetail :data='data' type="4"></bottomDetail>
</div>
</template>

<script>
	import { project } from '@/api/api.js'
	import navTop from '@/components/navTop.vue'
	import bottomDetail from '@/components/bottomDetail.vue'
	export default {
		data() {
			return {
				data:{id:'',image:'',chain_names:''},
				id:'',
			}
		},
		components:{
      bottomDetail,
      navTop
		},
		created(){
			this.id = this.$route.query.id
			this.getDetail(this.id)
		},
		methods: {
			toCompany(identification){
				if(!identification){
					this.$toast({
						title:'系统暂无该企业的完整信息，请稍后重试'
					})
					return
				}
				this.$router.push({name:'companyDetail',query:{identification}})
			},
			getDetail(id){
				this.$toast.loading({
          message: '加载中...',
          forbidClick: true,
        });
				project.getDetail({id}).then(res=>{
					let newContent = res.data.content.replace(/<img[^>]*>/gi, function(match, capture) {
            match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
            match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
            match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
            return match;
          });
					newContent = newContent.replace(/\<img/gi,
							'<img style="max-width:100%;height:auto;display:block;margin:0px auto;"');
					res.data.content = newContent
					this.data = res.data
					this.$toast.clear()
				})
			},
		}
	}
</script>

<style  lang="scss" scoped>
.nav{
	width: 100%;
  height: 40px;
}
.page{
  position: relative;
}
.page1{
  margin: 10px;
}

.info_div{
	margin: 10px;
	border-radius: 3px;
	background: #FA8A2622;
	padding: 15px 10px;
	margin-top: 5px;
}
.info_item{
	font-size: 13px;
	color: #000;
	.info_name{
		text-align-last: justify;
		width: 56px;
	}
	span{
		color: #666;
	}
}
.title_h{
	font-weight: 600;
  font-size: 22px;
  color: #000000;
	margin: 0 14px;
	.small{
		display: flex;
		justify-content: space-between;
		font-size: 12px;
		color: #666;
    font-weight: 500;
	}
}

.news_ps{
	color:#999;
	font-size:14px;
	margin: 20px 0;
}


.news_title{
	font-size:16px;
	color: #333;
	font-weight:700;
	margin-bottom:10px;
}
.news_company{
	font-size:14px;
	color:#EB7418;
	margin-bottom: 8px;
	text-decoration: underline;
}
.content{

}
</style>
